<template>
  <view class="container">
    <cu-custom bgColor="bg-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">翻译</block>
    </cu-custom>

    <view class="bg-top bg-green">
      <view class="top-box shadow">
        <view class="qh-title text-bold text-blue text-xl u-text-center">
          <text @tap="typeShow = true">{{ toName }}</text>
        </view>

        <!-- 类型选择器 -->
        <u-picker
          title="翻译类型"
          mode="selector"
          v-model="typeShow"
          :range="languages"
          range-key="label"
          @confirm="typeConfirm"
          :default-selector="selType"
        ></u-picker>

        <view class="cu-list menu">
          <!-- 待翻译区 -->
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-newshotfill text-mauve margin-right-xs"></text>
              <text class="text-black">翻译内容</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <u-input
                type="textarea"
                style="width: 600rpx; word-break: break-all"
                :maxlength="500"
                class="text-sm u-font-28"
                v-model="q"
                placeholder="请输入需要翻译的内容"
                name="input"
              ></u-input>
            </view>
          </view>

          <!-- 已翻译区 -->
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-newshotfill text-olive margin-right-xs"></text>
              <text class="text-black">翻译结果</text>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="action">
              <u-input
                @tap="copy(result)"
                type="textarea"
                style="width: 600rpx; word-break: break-all"
                placeholder=""
                disabled
                v-model="result"
                name="input"
              ></u-input>
            </view>
          </view>
        </view>
      </view>

      <!-- 翻译按钮 -->
      <view class="padding-lr flex margin-top-sm" style="justify-content: space-between; width: 750rpx">
        <button class="translate" :style="[inputStyle]" @tap="translate" style="width: 100%">点击翻译</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeColor: '#19be6b',
      mask: true,
      typeShow: false,
      languages: [],
      selType: [0],
      q: '',
      to: '',
      toName: '自动识别',
      result: ''
    }
  },
  computed: {
    inputStyle() {
      let style = {}
      if (this.q) {
        style.color = '#fff'
        style.backgroundColor = this.$u.color['success']
      }
      return style
    }
  },
  onLoad() {
    this.getLanguages()
  },
  methods: {
    /**
     * 获取所有的翻译类型信息
     */
    async getLanguages() {
      const res = await this.$u.api.getLanguages()
      let data = JSON.parse(JSON.stringify(res))

      this.languages = []

      // 自动识别
      let dat = {
        label: '自动识别',
        value: ''
      }
      this.languages.push(dat)

      data.forEach((item) => {
        let dat = {
          label: item.name,
          value: item.code
        }

        this.languages.push(dat)
      })
    },
    typeConfirm(e) {
      let index = e[0]
      let data = JSON.parse(JSON.stringify(this.languages[index]))

      this.to = data.value
      this.toName = data.label
      this.selType[0] = index
    },
    /**
     * 翻译
     */
    async translate() {
      // 校验
      if (!this.q) {
        return
      }

      let params = {
        q: this.q,
        to: this.to
      }

      const res = await this.$u.api.translate(params)
      let data = JSON.parse(JSON.stringify(res))
      this.result = data.translation
    },
    /**
     * 点击复制
     */
    copy(value) {
      uni.setClipboardData({
        data: value,
        success: function () {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  color: #333333;

  .bg-top {
    margin-top: -1rpx;
    width: 750rpx;
    height: 220rpx;
    padding-top: 50rpx;
    border-radius: 0 0 20% 20%;

    .top-box {
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 20rpx 30rpx 0rpx;
      position: relative;

      .qh-title {
        width: 100%;
        height: 60rpx;
        line-height: 65rpx;
      }
    }
  }

  .translate {
    background-color: #dbf1e1;
    color: $u-tips-color;
    border: none;
    border-radius: 10px;
    font-size: 30rpx;

    &::after {
      border: none;
    }
  }
}
</style>
